<template>
  <!--资产查询-->
  <el-scrollbar height="669px">
  <div class="assets_management">
    <div class="assets_head">
        <div style="padding-left: 20px;display: flex;align-items: center;">
          <svg t="1665453275486" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2600" width="32" height="32" style="padding-right: 5px"><path d="M867.388 0H30.118v831.247h837.27V0z m-54.212 764.988H84.33V66.258h728.847v698.73z m180.706-548.14V1024H126.494V891.482h54.212v60.236H939.67V289.129h-30.118v-72.282h84.33zM421.647 530.07h-120.47v-66.26h120.47V391.53h-120.47v-72.282H409.6l-96.376-120.47 36.14-48.189 102.4 126.494 102.4-126.494 36.142 48.188-96.377 120.471h108.424v66.259h-120.47v72.282h120.47v66.26h-120.47v150.587h-60.236V530.071z" p-id="2601" fill="#7dc5eb"></path></svg>
          <span style="font-size: 24px;margin-left: 5px">
            资产详情记录
          </span>
        </div>
      <div>
        <el-button style="width: 100px;height: 40px;color:#FFFFFF;background-color: cornflowerblue;margin-right: 20px" @click="">
          导入资金
        </el-button>
      </div>
    </div>
    <div class="assets_subject_top">
      <span style="line-height: 40px;">
        部门:
        <el-cascader :options="options" style="width: 120px;height: 40px; ">
                <template #default="{ node, data }">
                  <span>{{ data.label }}</span>
                  <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
                </template>
              </el-cascader>
      </span>
      <span style="margin-left: 20px;margin-right: 5px">操作人员:</span>
      <el-input style="width: 120px;height: 30px;"></el-input>
      <el-button style="margin-left: 10px;margin-right: 20px;">
        <el-icon><Search /></el-icon>
      </el-button>
    </div>
    <div class="assets_table">
      <el-table :data="tableData" height="480" style="width: 100%;height: 100%  ">
        <el-table-column prop="AssetNo" label="资产编号" width="180" align="center"/>
        <el-table-column prop="Money" label="金额" width="180" align="center"/>
        <el-table-column prop="Operators" label="操作人员" width="150" align="center"/>
        <el-table-column prop="Department" label="部门" width="150" align="center"/>
        <el-table-column prop="Purpose" label="用途" width="180" align="center"/>
        <el-table-column prop="Remarks" label="备注" width="280" align="center"/>
        <el-table-column label="添加时间" prop="OperationTime" align="center"/>
      </el-table>
    </div>
    <div class="CollectPaging">
      <el-pagination
          v-model:currentPage="pageNo"
          v-model:page-size="pageSize"
          :page-sizes="[5,10,]"
          small="small"
          layout="total, sizes, prev, pager, next, jumper"
          :total="d.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>
    </div>
  </div>
  </el-scrollbar>
</template>

<script lang="ts" setup>
import {reactive} from "vue";

const options = [
  {
    value:'1',
    label:'人事部',
  },
  {
    value:'2',
    label:'财务部',
  },
  {
    value:'3',
    label:'后勤部',
  },
  {
    value:'4',
    label:'技术部',
  },

]


const d = reactive({
  //table当前展示的数据
  list:null,
  //总记录
  total:0,
  //页码
  pageNo:1,
  //页大小
  pageSize:5,
  //数据
  tableData:[],
});

const tableData = [
  {
    AssetNo:'Z20221010110604',
    Money: '114514',
    Operators:'张三',
    Department: '后勤',
    Purpose:'采购',
    Remarks : '采购了电脑等用品' ,
    OperationTime : '2022-10-10',
  },
  {
    AssetNo:'Z20221010110851',
    Money: '5000',
    Operators:'张三',
    Department: '人事',
    Purpose:'吃饭',
    Remarks : '公司聚餐' ,
    OperationTime : '2022-10-10',
  }
]



</script>

<style>
.assets_management{
  width: 100%;
  height: 100%;
}
.assets_head{
  /*border: 1px solid black;*/
  width: 100%;
  height: 74px;
  background-color: #FFFFFF;
  flex-direction: row;
  align-content: center;
  flex-wrap: wrap;
  /*padding-left: 20px;*/
  display: flex;
  align-items: center;
  padding-top: 3px;
  justify-content: space-between
}

.assets_subject_top{
  /*border: 1px saddlebrown solid;*/
  width: 100%;
  height: 60px;
  display: flex;
  align-content: center;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}
.assets_table{

}
.CollectPaging{
   width: 100%;
   height: 40px;
   z-index: 99;
   display: flex;
   background-color: #FFFFFF;
 }
</style>